<template>
  <button 
    ref = '_ref'
    class="rl-button"
    :disabled="disabled"
    :autofocus="autofocus"
    :type="nativeType"
    :class="[
      type ? 'rl-button--' + type : '',
      size ? 'rl-button--' + size : '',
      {
      'is-disabled': disabled,
      'is-plain': plain,
      'is-round': round,
      'is-circle': circle,
      'is-loading': loading
      }
    ]"
  >
    <RlIcon :icon="icon" v-if="icon"></RlIcon>
    <span>
      <slot></slot>
    </span>
  </button>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { buttonProps } from './types';
  // 引入Icon组件
  import RlIcon from '@/components/Icon/Icon.vue'
  //  定义组件名称
  defineOptions({
    name:'RlButton'
  })
  // 接收props
  defineProps(buttonProps)
  // 暴露组件实例
  const _ref = ref<HTMLButtonElement>()
  defineExpose({
    _ref
  })
</script>

<style scoped lang="css" >
  
</style>